<template>
  <div class="order-view">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单列表</span>
      </div>
      <el-table :data="orders" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名"></el-table-column>
        <el-table-column prop="seatNumber" label="座位号"></el-table-column>
        <el-table-column prop="ticketPrice" label="票价" width="120"></el-table-column>
        <el-table-column prop="paymentStatus" label="支付状态"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleViewOrder(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 订单详情模态框 -->
    <el-dialog :visible.sync="dialogVisible" title="订单详情" width="40%">
      <div v-if="currentOrder">
        <p>订单编号: {{ currentOrder.id }}</p>
        <p>客户姓名: {{ currentOrder.customerName }}</p>
        <p>座位号: {{ currentOrder.seatNumber }}</p>
        <p>票价: {{ currentOrder.ticketPrice }}</p>
        <p>支付状态: {{ currentOrder.paymentStatus }}</p>
        <p>下单时间: {{ currentOrder.orderTime }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入 Mock.js 用于生成模拟数据
import Mock from 'mockjs';
// 导入 Element UI 组件
import { MessageBox, Dialog, Button, Table, TableColumn, Card } from 'element-ui';

export default {
  name: 'OrderView', // 组件名称
  components: { // 声明组件中使用的 Element UI 组件
    [Dialog.name]: Dialog, // Dialog 组件
    [Button.name]: Button, // Button 组件
    [Table.name]: Table, // Table 组件
    [TableColumn.name]: TableColumn, // TableColumn 组件
    [Card.name]: Card // Card 组件
  },
  data() { // 组件的初始数据
    return {
      orders: [], // 用于存储生成的订单数据的数组
      dialogVisible: false, // 控制订单详情模态框显示的布尔值
      currentOrder: null, // 用于存储当前选中的订单对象
    };
  },
  created() { // 组件实例被创建之后立即调用的钩子函数
    this.generateMockOrders(); // 调用生成模拟订单数据的方法
  },
  methods: { // 组件的方法
    generateMockOrders() { // 生成模拟订单数据的方法
      // 使用 Mock.js 生成 100 条模拟订单数据
      const ordersData = Mock.mock({
        'orders|100': [
          {
            'id': '@increment', // 订单 ID，自增
            'customerName': '@cname', // 客户姓名
            'seatNumber': '@integer(1, 200)', // 座位号，1 到 200 之间的整数
            'ticketPrice': '@float(100, 1000, 2, 2)', // 票价，100 到 1000 之间的浮点数，保留两位小数
            'paymentStatus': () => ['Pending', 'Confirmed', 'Completed'][Mock.Random.integer(0, 2)], // 支付状态，从 'Pending', 'Confirmed', 'Completed' 中随机选择
            'orderTime': '@datetime' // 下单时间
          }
        ]
      });
      // 将生成的模拟订单数据赋值给 orders 数组
      this.orders = ordersData.orders;
    },
    handleViewOrder(order) { // 查看订单详情的方法
      // 设置当前选中的订单对象
      this.currentOrder = order;
      // 显示订单详情模态框
      this.dialogVisible = true;
    },
    handleCloseDialog() { // 关闭订单详情模态框的方法
      // 隐藏订单详情模态框
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.order-view {
  padding: 20px;
}

.box-card {
  width: auto;
  margin-bottom: 10px;
}

.dialog-footer {
  text-align: right;
}
</style>